<template>
  <div class="flex h-full w-full items-center">
    <div class="!mx-auto -mt-40 h-1/2 w-7/12 px-20 py-5">
      <h2 v-if="expireData.expire" class="text-center text-2xl text-red-500">
        {{ expireData.msg }}
      </h2>
      <div class="mb-6 flex items-center justify-center text-center text-3xl">
        <span> 机器码：</span>
        <span class="cursor-pointer" @click="handleCopyMachineCode">{{
          machineCode
        }}</span>
      </div>
      <div class="flex items-start justify-center">
        <Upload
          :file-list="fileList"
          :before-upload="beforeUpload"
          accept=".lic"
        >
          <template #itemRender="{ file }">
            <div class="w-30 truncate">{{ file.name }}</div>
          </template>

          <Button type="primary" ghost>
            <div class="flex items-center">
              <CloudUploadOutlined />
              <span>选择授权文件</span>
            </div>
          </Button>
        </Upload>
        <Button class="mx-4" type="primary" @click="handleUpload"
          >提交验证</Button
        >
        <Button
          v-if="expireData.expire"
          class="mr-4"
          type="primary"
          ghost
          @click="onSkip"
          >跳过</Button
        >
        <Button type="primary" ghost @click="() => router.go(-1)">返回</Button>
      </div>
      <Divider></Divider>
      <div class="bg-neutral-100 px-20 py-5">
        <strong class="text-xl">系统授权指南</strong>
        <div class="text-sm">
          <div>
            1. 提供机器码:
            请将上述机器码完整复制并提供给博远减灾科技技术支持人员。
          </div>
          <div>2. 获取授权文件: 工作人员会根据机器码生成对应的授权文件。</div>
          <div>
            3.上传验证:获取授权文件后，请通过本页面的"选择授权文件"按钮进行上传,系统将自动验证授权文件有效性，验证通过后即可正常使用系统功能。
          </div>
        </div>

        <div>温馨提示:如遇任何授权问题，请联系技术支持热线 400-800-XXXX</div>
      </div>
    </div>
  </div>
</template>
<route lang="json">
{
  "name": "license",
  "meta": {
    "layout": false,
    "requireAuth": false
  }
}
</route>

<script setup lang="tsx">
import { h, onMounted, reactive, ref } from 'vue';
import { CloudUploadOutlined } from '@ant-design/icons-vue';
import { useClipboard } from '@vueuse/core';
import {
  Button,
  Divider,
  Modal,
  Upload,
  UploadProps,
  message,
} from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { fetchMachineCode, updateLicense } from './api';

const router = useRouter();
const machineCode = ref('');
const expireData = reactive({
  expire: false,
  msg: '',
});

onMounted(() => {
  console.log(history.state);

  if (history.state.expire) {
    expireData.expire = true;
    expireData.msg = history.state.msg;
  }
  fetchMachineCode().then((res) => {
    machineCode.value = res.data;
  });
});

const fileList = ref<UploadProps['fileList']>([]);
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  fileList.value = [file];
  return false;
};

const handleUpload = async () => {
  if (!fileList.value.length) {
    message.info('请选择授权文件');
    return;
  }
  const file = fileList.value[0];
  const formData = new FormData();
  formData.append('file', file);
  try {
    await updateLicense(formData);
    router.push('/custom-login');
  } catch (error) {
    Modal.info({
      title: '提示',
      content: error.message,
    });
  }
};

const { copy } = useClipboard({
  source: machineCode,
  legacy: true,
});

const handleCopyMachineCode = () => {
  copy(machineCode.value);
  message.success('机器码复制成功');
};

const onSkip = () => {
  router.push('/dashboard');
};
</script>
